<template>
  <div class="">
    <el-row>
        <el-col>
          <el-table
            ref="gameTable"
            :data="tableData"
            highlight-current-row
            height="300"
            style="width: 100%">
            <el-table-column prop="sort" label="日期" width="50"></el-table-column>
            <el-table-column :show-overflow-tooltip="true" prop="project" label="项目"></el-table-column>
            <el-table-column :show-overflow-tooltip="true" prop="team" label="队伍"></el-table-column>
            <el-table-column prop="status" label="状态" width="70">
              <template slot-scope="scope">
                <el-tag
                  :type="scope.row.status === '已打分' ? 'success' : 'primary'"
                  disable-transitions>{{scope.row.status}}</el-tag>
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="success"
                  @click="handleStart(scope.$index, scope.row)">开始</el-button>
                <el-button
                  size="mini"
                  type="danger"
                  @click="handleStop(scope.$index, scope.row)">结束</el-button>
                <el-button
                  size="mini"
                  type="warning"
                  @click="handleStop(scope.$index, scope.row)">弃权</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
    <el-card shadow="never" style="margin: 20px 0;">
      <el-row :gutter="10" class="panel-group">
        <el-col :xs="12" :sm="8" :md="4" :lg="{span: '24-5'}" class="card-panel-col" v-for="(item,index) in 10" :key="index" style="margin-bottom: 20px;">
          <el-card shadow="never" :body-style="{ padding: '0px' }">
            <div style="padding-top: 14px;">
              <div class="" style="text-align: center;">
                <div class="">裁判角色(真实姓名)</div>
                <div class="" style="font-size: 30px;padding-top:10px;">8.8</div>
              </div>
              <div class="bottom clearfix" :class="[index%2==0?'already':'noready']">
                <el-row type="flex" justify="space-around">
                  <el-col v-if="index%2==0">
                    <i class="el-icon-refresh">重打</i>
                  </el-col>
                  <el-col v-if="index%2==0">
                    <i class="el-icon-bottom">下线</i>
                  </el-col>
                  <el-col>
                    <i class="el-icon-edit">编辑</i>
                  </el-col>
                </el-row>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
      <el-row :gutter="10" class="panel-group" type="flex">
        <el-col :xs="12" :sm="8" :lg="{span: '24-5'}" class="card-panel-col">
          <el-card shadow="never" :body-style="{ padding: '0px' }">
            <div style="padding-top: 14px;">
              <div class="" style="text-align: center;">
                <div class="">加分</div>
                <div class="" style="font-size: 30px;padding-top:10px;">8.8</div>
              </div>
              <div class="bottom clearfix headreferee">
                <i class="el-icon-edit">编辑</i>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :xs="12" :sm="8" :lg="{span: '24-5'}" class="card-panel-col">
          <el-card shadow="never" :body-style="{ padding: '0px' }">
            <div style="padding-top: 14px;">
              <div class="" style="text-align: center;">
                <div class="">减分</div>
                <div class="" style="font-size: 30px;padding-top:10px;">8.8</div>
              </div>
              <div class="bottom clearfix headreferee">
                <i class="el-icon-edit">编辑</i>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :xs="12" :sm="8" :lg="{span: '24-15'}" class="card-panel-col">
          <el-card shadow="never" :body-style="{ padding: '0px' }">
            <!-- <el-button @click="positionIndex('3')">定位</el-button> -->
            <el-row type="flex">
              <el-col>
                <div style="padding-top: 14px;">
                  <div class="" style="text-align: center;">
                    <div class="">总得分</div>
                    <div class="" style="font-size: 80px;padding-top:10px;">8.8</div>
                  </div>
                </div>
              </el-col>
              <el-col>
                <div style="padding-top: 14px;">
                  <div class="" style="text-align: center;">
                    <div class="">排名</div>
                    <div class="" style="font-size: 80px;padding-top:10px;">1</div>
                  </div>
                </div>
              </el-col>
              <el-col>
                <div class="submit-score">
                  <el-button icon="el-icon-upload2" type="success" @click="positionIndex('3')">提交打分</el-button>
                </div>
              </el-col>
            </el-row>
          </el-card>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>
<script>
export default {
  data () {
    return {
      form:{
        value:null,
      },
      tableData: [{
        sort: '1',
        project: '学校俱乐部U9（9岁及以下）-集体花球自选动作',
        team: '青岛理工大学QUT stars啦啦队',
        status: '已打分'
      }, {
        sort: '2',
        project: '学校俱乐部U28（28岁及以下）-集体自由舞蹈自选动作-徒手组',
        team: 'ETL啦啦操俱乐部青岛恒星科技学院啦啦队',
        status: '未打分'
      }, {
        sort: '3',
        project: '学校俱乐部U28（28岁及以下）-双人花球自选动作',
        team: 'QCU健身俱乐部Hot Chili啦啦队',
        status: '未打分'
      }, {
        sort: '4',
        project: '学校俱乐部U28（28岁及以下）-双人花球自选动作',
        team: 'QCU健身俱乐部Hot Chili啦啦队',
        status: '未打分'
      }, {
        sort: '5',
        project: '学校俱乐部U28（28岁及以下）-双人街舞自选动作',
        team: '锦州市第二高级中学启航啦啦队',
        status: '未打分'
      }, {
        sort: '6',
        project: '学校俱乐部U28（28岁及以下）-双人街舞自选动作',
        team: '锦州市第二高级中学启航啦啦队',
        status: '未打分'
      }, {
        sort: '7',
        project: '学校俱乐部U28（28岁及以下）-双人街舞自选动作',
        team: '青岛理工大学QUT stars啦啦队	',
        status: '未打分'
      }, {
        sort: '8',
        project: '学校俱乐部U28（28岁及以下）-双人街舞自选动作',
        team: 'ETL啦啦操俱乐部青岛恒星科技学院啦啦队',
        status: '未打分'
      }, {
        sort: '9',
        project: '社会俱乐部U18（18岁及以下）-双人街舞自选动作',
        team: '青岛市崂山区第二实验小学Shining啦啦队',
        status: '未打分'
      }, {
        sort: '10',
        project: '社会俱乐部U18（18岁及以下）-双人街舞自选动作',
        team: '黄海职校海之魂啦啦操俱乐部海之魂啦啦队',
        status: '未打分'
      }, {
        sort: '11',
        project: '学校俱乐部U28（28岁及以下）-集体爵士自选动作',
        team: '中国海洋大学Dmore啦啦队',
        status: '未打分'
      }, {
        sort: '12',
        project: '学校俱乐部U28（28岁及以下）-花球校园啦啦操示范套路(第三套)',
        team: '中国海洋大学Dmore啦啦队',
        status: '未打分'
      }, {
        sort: '13',
        project: '社会俱乐部U12（12岁及以下）-集体花球自选动作',
        team: '中国海洋大学Dmore啦啦队',
        status: '未打分'
      }]
    }
  },
  methods:{
    handleStart() {},
    handleStop() {},
    positionIndex(e) {
      if (this.tableData && this.tableData.length) {
        for (var i = 0; i < this.tableData.length; i++) {
            if (this.tableData[i].sort == e) {
                this.$refs['gameTable'].setCurrentRow(this.tableData[i]);
                var dom = this.$refs.gameTable.bodyWrapper;
                this.$nextTick(() => {
                  console.log(e)
                  if(e>2) {
                    dom.scrollTo(0, 57 * (e - 2));
                  } else {
                    return
                  }
                });
                return;
            }
        }
        this.$message.error('未找到相关数据');
        // this.scanData = null;
        // this.$refs.scanDataRef.focus();
        return;
      }
    },
    getElementTop(element) {
      console.log('element',element)
      var actualTop = element.offsetTop;
      var current = element.offsetParent;
      while (current !== null) {
          actualTop += current.offsetTop;
          current = current.offsetParent;
      }
      return actualTop;
    },
    open() {
      this.$confirm('此操作将提交打分, 是否继续?', '提示', {
        confirmButtonText: '提交',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message({
          type: 'success',
          message: '打分成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消打分'
        });          
      });
    }
  }
}
</script>

<style>
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both
}
.el-rate {
  height: 50px;
}
.el-rate__icon {
  font-size: 50px;
  margin-right: 6px;
  color: #C0C4CC;
  transition: .3s;
}
.bottom {
  margin-top: 13px;
  line-height: 12px;
  text-align: center;
  padding: 14px 0;
  font-size: 16px;
  color: #ffffff;
  font-weight: bold;
}
.el-col-lg-24-5 {
  width: 20%;
}
.el-col-lg-24-15 {
  width: 60%;
}
.already {
  background-color: #409EFF;
}
.noready {
  background-color: #909399;
}
.headreferee {
  background-color: #67C23A;
}
.el-table--striped .el-table__body tr.el-table__row--striped.current-row td, .el-table__body tr.current-row > td {
  color: #fff;
  background-color: #409EFF !important;
}
.submit-score {
  display: flex;
  justify-content:center;
  align-items: center;
  height: 100%;
}
</style>